<!doctype html>
<html lang="en">
<head>
    <title>Carousel - Paging</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Overview" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    
    <link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijtree.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
    <link href="../../themes/wijmo/jquery.wijmo.wijcarousel.css" rel="stylesheet" type="text/css" />    
    <script src="../../wijmo/jquery.wijmo.wijcarousel.js" type="text/javascript"></script>
    <link href="../../themes/wijmo/jquery.wijmo.wijpager.css" rel="stylesheet" type="text/css" />
    <script src="../../wijmo/jquery.wijmo.wijpager.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            var options = {
                display: 1,
                showTimer: false,
                showPager: true,
                buttonOffset: 16,
                showControlsOnHover: true,
                pagerType: "numbers"
            };
            
            $("#wijcarousel0").wijcarousel(options);

            $("#wijcarousel1").wijcarousel($.extend(options, {
                pagerType: "dots",
                showControlsOnHover: true,
                pagerPosition: {
                    my: "center top",
                    at: "center bottom",
                    offset: "0 5"
                },
                start: 2
            }));
            
            $("#wijcarousel2").wijcarousel($.extend(options, {
                pagerType: "slider",
                showControlsOnHover: true,
                loop:false,
                pagerPosition: {
                    my: "center top",
                    at: "center bottom"
                },
                start: 3

            }));

            $("#wijcarousel3").wijcarousel($.extend(options, {
                pagerType: "slider",
                showControlsOnHover: true,
                sliderOrientation: "vertical",
                loop: false,
                pagerPosition: {
                    offset: "8 0"
                },
                start: 3

            }));
        });
    </script>
     <style type="text/css">

    #wijcarousel0,#wijcarousel1,#wijcarousel2,#wijcarousel3
    {
        width:750px;
        height:300px;	
    }
    </style>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Overview</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <h3>Numbers</h3>
            <div>
                <div id="wijcarousel0">
                    <ul class="">
                        <li class="">
                            <img alt="1" src="http://lorempixum.com/750/300/sports/1" title="Word" /><span>Word Caption 1</span></li>
                        <li class="">
                            <img alt="2" src="http://lorempixum.com/750/300/sports/2" title="Word2" /><span>Word Caption 2</span></li>
                        <li class="">
                            <img alt="3" src="http://lorempixum.com/750/300/sports/3" title="Word3" /><span>Word Caption 3</span></li>
                        <li class="">
                            <img alt="4" src="http://lorempixum.com/750/300/sports/4" title="Word4" /><span>Word Caption 4</span></li>
                        <li class="">
                            <img alt="5" src="http://lorempixum.com/750/300/sports/5" title="Word5" /><span>Word Caption 5</span></li>
                     </ul>
                </div>
                <br /><br />
                <h3>Dots</h3><br />
                <div id="wijcarousel1" class="">
                    <ul class="">
                        <li class="">
                            <img alt="1" src="http://lorempixum.com/750/300/city/1" title="Word" /><span>Word Caption 1</span></li>
                        <li class="">
                            <img alt="2" src="http://lorempixum.com/750/300/city/2" title="Word2" /><span>Word Caption 2</span></li>
                        <li class="">
                            <img alt="3" src="http://lorempixum.com/750/300/city/3" title="Word3" /><span>Word Caption 3</span></li>
                        <li class="">
                            <img alt="4" src="http://lorempixum.com/750/300/city/4" title="Word4" /><span>Word Caption 4</span></li>
                        <li class="">
                            <img alt="5" src="http://lorempixum.com/750/300/city/5" title="Word5" /><span>Word Caption 5</span></li>
                     </ul>
                </div>
                <br /><h3>Slider</h3><br />
                <div id="wijcarousel2" class="">
                    <ul class="">
                        <li class="">
                            <img alt="1" src="http://lorempixum.com/750/300/abstract/1" title="Word" /><span>Word Caption 1</span></li>
                        <li class="">
                            <img alt="2" src="http://lorempixum.com/750/300/abstract/2" title="Word2" /><span>Word Caption 2</span></li>
                        <li class="">
                            <img alt="3" src="http://lorempixum.com/750/300/abstract/3" title="Word3" /><span>Word Caption 3</span></li>
                        <li class="">
                            <img alt="4" src="http://lorempixum.com/750/300/abstract/4" title="Word4" /><span>Word Caption 4</span></li>
                        <li class="">
                            <img alt="5" src="http://lorempixum.com/750/300/abstract/5" title="Word5" /><span>Word Caption 5</span></li>
                     </ul>
                </div>
                <h3>Slider vertical</h3><br />
                <div id="wijcarousel3" class="">
                    <ul class="">
                        <li class="">
                            <img alt="1" src="http://lorempixum.com/750/300/abstract/1" title="Word" /><span>Word Caption 1</span></li>
                        <li class="">
                            <img alt="2" src="http://lorempixum.com/750/300/abstract/2" title="Word2" /><span>Word Caption 2</span></li>
                        <li class="">
                            <img alt="3" src="http://lorempixum.com/750/300/abstract/3" title="Word3" /><span>Word Caption 3</span></li>
                        <li class="">
                            <img alt="4" src="http://lorempixum.com/750/300/abstract/4" title="Word4" /><span>Word Caption 4</span></li>
                        <li class="">
                            <img alt="5" src="http://lorempixum.com/750/300/abstract/5" title="Word5" /><span>Word Caption 5</span></li>
                     </ul>
                </div>
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
        <p>This sample demonstrates how different type of paging can be applied to the wijcarousel widget using the pagerType option.</p>
        </div>
    </div>
</body>
</html>
